<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link active">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Helpers</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Helpers</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Content helpers -->
							<div class="card" id="helpers_content">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Content helpers</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									Besides basic typography classes, helper classes are an extra set of additional predefined classes, that can be applied to different content or layout elements and components. Helper classes are custom additions mostly, written especially for current layout, except common BS helpers. Below is a summarized table with all available classes, descriptions and content type. Flex utilities are moved to a separate page and include various examples.
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Borders</span></td>
											</tr>
											<tr>
												<td><code>.border-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Use this class to remove <strong>all</strong> borders from an element</td>
											</tr>
											<tr>
												<td><code>.border-[side]-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Use this class to remove specific borders. Available <strong>[side]</strong> options: <code>l</code> - left, <code>r</code> - right, <code>t</code> - top, <code>b</code> - bottom, <code>x</code> - horizontal, <code>y</code> - vertical.</td>
											</tr>
											<tr>
												<td><code>.border-width-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets border width to 0. Useful for inheriting other border properties</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.border</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds a border to an element with pre-defined BS's default width and color properties</td>
											</tr>
											<tr>
												<td><code>.border-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds the border to an element. Available <strong>[size]</strong> options: <code>1</code> - default border width (1px); <code>2</code> - double width (2px); <code>3</code> - tripple width (3px)</td>
											</tr>
											<tr>
												<td><code>.border-[side]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Same as <code>.border-[size]</code>, but for specific <strong>[side]</strong>: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code></td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.border-[color]</code></td>
												<td class="text-muted">Any element</td>
												<td>Changes color of all element's borders. Supports all available color classes, including <code>transparent</code> option</td>
											</tr>
											<tr>
												<td><code>.border-[side]-[color]</code></td>
												<td class="text-muted">Any element</td>
												<td>If you need to change color of some specific border, use this class combination. Options for <strong>[side]</strong>: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code></td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.rounded</code></td>
												<td class="text-muted">Any element</td>
												<td>Rounds all borders. Default value is defined in <code>$border-radius</code> variable</td>
											</tr>
											<tr>
												<td><code>.rounded-[side]</code></td>
												<td class="text-muted">Any element</td>
												<td>Rounds borders of specific <strong>[side]</strong>: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code></td>
											</tr>
											<tr>
												<td><code>.rounded-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Removes rounded corners from all borders</td>
											</tr>
											<tr>
												<td><code>.rounded-[side]-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Removes rounded corners from specific <strong>[side]</strong>: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code></td>
											</tr>
											<tr>
												<td><code>.rounded-round</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>100px</code> border radius to all borders</td>
											</tr>
											<tr>
												<td><code>.rounded-[side]-round</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>100px</code> border radius to specific <strong>[side]</strong>: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code></td>
											</tr>
											<tr>
												<td><code>.rounded-circle</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>50%</code> border radius to all borders</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Transformations</span></td>
											</tr>
											<tr>
												<td><code>.rotate-[value]</code></td>
												<td class="text-muted">Any element</td>
												<td>Rotates element <strong>clockwise</strong>. Options for <strong>[value]</strong>: <code>45</code>, <code>90</code>, <code>180</code> degrees</td>
											</tr>
											<tr>
												<td><code>.rotate-[value]-inverse</code></td>
												<td class="text-muted">Any element</td>
												<td>Same as <code>.rotate-[value]</code>, but rotation is counterclockwise. Options for <strong>[value]</strong> are the same as well</td>
											</tr>
											<tr>
												<td><code>.spinner</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds infinite clockwise rotation</td>
											</tr>
											<tr>
												<td><code>.spinner-inverse</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds infinite counterclockwise rotation</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Positioning</span></td>
											</tr>
											<tr>
												<td><code>.position-[value]</code></td>
												<td class="text-muted">Any element</td>
												<td>Changes element's positiion. Available options for <strong>[value]</strong>: <code>relative</code>, <code>static</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code></td>
											</tr>
											<tr>
												<td><code>.fixed-[top, bottom]</code></td>
												<td class="text-muted">Any element</td>
												<td>Position an element at the top (bottom) of the viewport, from edge to edge</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.top-[0, auto]</code></td>
												<td class="text-muted">All except static</td>
												<td>Resets <code>top</code> property for fixed, absolute and relative opsitions</td>
											</tr>
											<tr>
												<td><code>.bottom-[0, auto]</code></td>
												<td class="text-muted">All except static</td>
												<td>Resets <code>bottom</code> property for fixed, absolute and relative opsitions</td>
											</tr>
											<tr>
												<td><code>.left-[0, auto]</code></td>
												<td class="text-muted">All except static</td>
												<td>Resets <code>left</code> property for fixed, absolute and relative opsitions</td>
											</tr>
											<tr>
												<td><code>.right-[0, auto]</code></td>
												<td class="text-muted">All except static</td>
												<td>Resets <code>right</code> property for fixed, absolute and relative opsitions</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Alignment</span></td>
											</tr>
											<tr>
												<td><code>.float-[side]</code></td>
												<td class="text-muted">Any element</td>
												<td>Element floating. Options for <strong>[side]</strong>: <code>left</code>, <code>right</code> sides</td>
											</tr>
											<tr>
												<td><code>.float-[breakpoint]-[side]</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of element floating. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.float-none</code></td>
												<td class="text-muted">Any element</td>
												<td>Removes floating</td>
											</tr>
											<tr>
												<td><code>.clearfix</code></td>
												<td class="text-muted">Any element</td>
												<td>Easily clear floats by adding <code>.clearfix</code> to the element</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.text-[side]</code></td>
												<td class="text-muted">Inline element, text</td>
												<td>Element alignment. Options for <strong>[side]</strong>: <code>left</code>, <code>center</code>, <code>right</code> sides</td>
											</tr>
											<tr>
												<td><code>.text-[breakpoint]-[side]</code></td>
												<td class="text-muted">Inline element, text</td>
												<td>Responsive variations of element alignment. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.align-[value]</code></td>
												<td class="text-muted">Inline element, table</td>
												<td>Vertical alignment. Options for <strong>[value]</strong>: <code>baseline</code>, <code>top</code>, <code>middle</code>, <code>bottom</code>, <code>text-top</code> and <code>text-bottom</code></td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Images</span></td>
											</tr>
											<tr>
												<td><code>.img-fluid</code></td>
												<td class="text-muted">Images only</td>
												<td>Applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element</td>
											</tr>
											<tr>
												<td><code>.img-thumbnail</code></td>
												<td class="text-muted">Images only</td>
												<td>Adds grey frame with white background color</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Sizing</span></td>
											</tr>
											<tr>
												<td><code>.wmin-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets a minimum width of the element in pixels. Available options for <strong>[size]</strong>: <code>200</code>, <code>250</code>, <code>300</code>, <code>350</code>, <code>400</code>, <code>450</code>, <code>500</code>, <code>550</code>, <code>600</code> pixels</td>
											</tr>
											<tr>
												<td><code>.wmin-[breakpoint]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of width utilities. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.w-[25, 50, 75, 100]</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets a <strong>width</strong> of the element in percents</td>
											</tr>
											<tr>
												<td><code>.w-auto</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets the <strong>width</strong> of an element to <code>auto</code> (width reset)</td>
											</tr>
											<tr>
												<td><code>.w-[breakpoint]-auto</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of width reset utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.h-[25, 50, 75, 100]</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets a <strong>height</strong> of the element in percents</td>
											</tr>
											<tr>
												<td><code>.h-auto</code></td>
												<td class="text-muted">Any element</td>
												<td>Sets the <strong>height</strong> of an element to <code>auto</code> (height reset)</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Visibility</span></td>
											</tr>
											<tr>
												<td><code>.overflow-[value]</code></td>
												<td class="text-muted">Containers</td>
												<td>Content overflow utility. Available options for <strong>[value]</strong>: <code>hidden</code> - hides content, <code>visible</code> - shows content, <strong>auto</strong> - makes content scrollable</td>
											</tr>
											<tr>
												<td><code>.visible</code></td>
												<td class="text-muted">Containers</td>
												<td>Makes the element invisible for the user, but visible for screen readers</td>
											</tr>
											<tr>
												<td><code>.invisible</code></td>
												<td class="text-muted">Containers</td>
												<td>Can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document</td>
											</tr>
											<tr>
												<td><code>.text-hide</code></td>
												<td class="text-muted">Text only</td>
												<td>Helps replace an element's text content with a background image</td>
											</tr>
											<tr>
												<td><code>.sr-only</code></td>
												<td class="text-muted">Any element</td>
												<td>Hides an element to all devices except screen readers</td>
											</tr>


											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Display</span></td>
											</tr>
											<tr>
												<td><code>.d-block</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as a block element</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-block</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-block</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-inline-block</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as an inline-level block container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-inline-block</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-inline-block</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-inline</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as an inline container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-inline</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-inline</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-table</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as a table element</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-table</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-table</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-table-cell</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as a table cell element</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-table-cell</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-table-cell</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-flex</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as a block-level flex container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-flex</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-flex</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-inline-flex</code></td>
												<td class="text-muted">Any element</td>
												<td>Displays an element as an inline-level flex container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-inline-flex</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-inline-flex</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-none</code></td>
												<td class="text-muted">Any element</td>
												<td>Hides the element (has no effect on layout)</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-none</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>d-none</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Spacing</span></td>
											</tr>
											<tr>
												<td><code>.m-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>margin</code> property to <strong>all</strong> sides. Available <strong>[size]</strong> are: <code>0</code>, <code>1</code> ~ 5px, <code>2</code> ~ 10px, <code>3</code> ~ 20px, <code>4</code> ~ 30px, <code>5</code> ~ 40px, <code>auto</code></td>
											</tr>
											<tr>
												<td><code>.m-[breakpoint]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>.m-[size]</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.m[l,r,t,b,x,y]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>margin</code> property to the specific side: <code>l</code> - left, <code>r</code> - right, <code>t</code> - top, <code>b</code> - bottom, <code>x</code> - horizontal, <code>y</code> - vertical. Options for the size are the same</td>
											</tr>
											<tr>
												<td><code>.m[l,r,t,b]-[breakpoint]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Same as for <code>.m-[breakpoint]-[size]</code>, except <code>x</code> and <code>y</code> options</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.p-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>padding</code> property to <strong>all</strong> sides. Available <strong>[size]</strong> are: <code>0</code>, <code>1</code> ~ 5px, <code>2</code> ~ 10px, <code>3</code> ~ 20px, <code>4</code> ~ 30px, <code>5</code> ~ 40px, <code>auto</code></td>
											</tr>
											<tr>
												<td><code>.p-[breakpoint]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Responsive variations of <code>.p-[size]</code> utility. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xlg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.p[l,r,t,b,x,y]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Adds <code>padding</code> property to the specific side: <code>l</code> - left, <code>r</code> - right, <code>t</code> - top, <code>b</code> - bottom, <code>x</code> - horizontal, <code>y</code> - vertical. Options for the size are the same</td>
											</tr>
											<tr>
												<td><code>.p[l,r,t,b]-[breakpoint]-[size]</code></td>
												<td class="text-muted">Any element</td>
												<td>Same as for <code>.p-[breakpoint]-[size]</code>, except <code>x</code> and <code>y</code> options</td>
											</tr>
											<tr class="table-border-solid">
												<td><code>.ml-2</code></td>
												<td class="text-muted">Inline elements</td>
												<td>Adds extra <code>left</code> margin to the element (mostly for icons and badges)</td>
											</tr>
											<tr>
												<td><code>.mr-2</code></td>
												<td class="text-muted">Inline elements</td>
												<td>Adds extra <code>right</code> margin to the element (mostly for icons and badges)</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Text</span></td>
											</tr>
											<tr>
												<td><code>.text-size-[value]</code></td>
												<td class="text-muted">Text</td>
												<td>Sets/overrides font size. Available <strong>[value]</strong> options: <code>base</code> ~ 13px, <code>xs</code> ~ 11px; <code>sm</code> - 12px, <code>lg</code> ~ 14px</td>
											</tr>
											<tr>
												<td><code>.line-height-[value]</code></td>
												<td class="text-muted">Text</td>
												<td>Makes it 20px despite the font size. Available <strong>[value]</strong> options: <code>base</code>, <code>xs</code>; <code>sm</code>, <code>lg</code></td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Misc</span></td>
											</tr>
											<tr>
												<td><code>.cursor-[value]</code></td>
												<td class="text-muted">Any element</td>
												<td>Changes cursor style. Available <strong>[value]</strong> options: <code>move</code>, <code>pointer</code> and <code>default</code> styles</td>
											</tr>
											<tr>
												<td><code>.shadow-0</code></td>
												<td class="text-muted">Any element</td>
												<td>Removes shadow from element</td>
											</tr>
											<tr>
												<td><code>[data-fouc]</code></td>
												<td class="text-muted">jQuery plugins</td>
												<td>This is an attribute that partially helps to fix <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content" target="_blank">FOUC</a> issue. It sets <code>opacity</code> to <code>0</code> and other properties to match styled component size. So that you won't see unstyled content flashing when plugin gets initialized.</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- /content helpers -->


							<!-- Enable flex behaviors -->
							<div class="card" id="helpers_flex_enable">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Enable flex behaviors</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties. The <code>.d-flex</code> class makes the flex container a block-level element. The <code>.d-inline-flex</code> class makes the flex container an atomic inline-level element. <strong>Please note:</strong> an anonymous flex item that contains only white space is not rendered, as if it were designated <code>display: none</code>. Also <code>clear</code> and <code>vertical-align</code> properties have no effect on flex items, and <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Flexbox container</p>

												<div class="bg-light border rounded p-2">
													<div class="d-flex bg-slate py-2 px-3 rounded">
														I'm a flexbox container!
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Inline flexbox container</p>

												<div class="d-flex bg-light border rounded p-2">
													<div class="d-inline-flex bg-slate py-2 px-3 rounded">
														I'm an inline flexbox container!
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Display classes</span></td>
											</tr>
											<tr>
												<td><code>.d-flex</code></td>
												<td>Displays an element as a <strong>block-level</strong> flex container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-flex</code></td>
												<td>Responsive variations of <code>.d-flex</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.d-inline-flex</code></td>
												<td>Displays an element as an <strong>inline-level</strong> flex container</td>
											</tr>
											<tr>
												<td><code>.d-[breakpoint]-inline-flex</code></td>
												<td>Responsive variations of <code>.d-inline-flex</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /enable flex behaviors -->


				            <!-- Flex direction -->
							<div class="card" id="helpers_flex_direction">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Flex direction</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									<p class="mb-3">Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is <code>row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). Use <code>.flex-row</code> to set a horizontal direction (the browser default), or <code>.flex-row-reverse</code> to start the horizontal direction from the opposite side. Use <code>.flex-column</code> to set a vertical direction, or <code>.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>

									<div class="row">
										<div class="col-md-6">
											<div class="mb-3">
												<p class="font-weight-semibold">Row direction</p>

												<div class="d-flex flex-row bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item 1
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item 2
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item 3
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item 4
													</div>
												</div>
											</div>
										</div>

										<div class="col-md-6">
											<div class="mb-3">
												<p class="font-weight-semibold">Reverse row direction</p>

												<div class="d-flex flex-row-reverse bg-light border rounded p-2">
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item 1
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item 2
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item 3
													</div>
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item 4
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-md-6">
											<div class="mb-3">
												<p class="font-weight-semibold">Column direction</p>

												<div class="d-flex flex-column bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-top">
														Flex item 1
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3">
														Flex item 2
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3">
														Flex item 3
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3 rounded-bottom">
														Flex item 4
													</div>
												</div>
											</div>
										</div>

										<div class="col-md-6">
											<div class="mb-3">
												<p class="font-weight-semibold">Reverse column direction</p>

												<div class="d-flex flex-column-reverse bg-light border rounded p-2">
													<div class="bg-slate border-top-1 py-2 px-3 rounded-bottom">
														Flex item 1
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3">
														Flex item 2
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3">
														Flex item 3
													</div>
													<div class="bg-slate border-white py-2 px-3 rounded-top">
														Flex item 4
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Flex row classes</span></td>
											</tr>
											<tr>
												<td><code>.flex-row</code></td>
												<td>Default value. The flexible items are displayed horizontally, as a row</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-row</code></td>
												<td>Responsive variations of <code>.flex-row</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.flex-row-reverse</code></td>
												<td>Same as row, but in reverse order</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-row-reverse</code></td>
												<td>Responsive variations of <code>.flex-row-reverse</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>

											<tr class="table-border-double table-active">
												<td colspan="3"><span class="font-weight-semibold">Flex column classes</span></td>
											</tr>
											<tr>
												<td><code>.flex-column</code></td>
												<td>The flexible items are displayed vertically, as a column</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-column</code></td>
												<td>Responsive variations of <code>.flex-column</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.flex-column-reverse</code></td>
												<td>Same as column, but in reverse order</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-column-reverse</code></td>
												<td>Responsive variations of <code>.flex-column-reverse</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>lg</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /flex direction -->


				            <!-- Justify content -->
							<div class="card" id="helpers_flex_justify">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Justify content</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Use <code>justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code>flex-direction: column</code>). Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, or <code>around</code> values. The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with <code>flex-grow</code> different from <code>0</code>, it will have no effect as there won't be any available space.

									<div class="row">
										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Beginning (start) of the container</p>

												<div class="d-flex justify-content-start bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Center of the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">End of the container</p>

												<div class="d-flex justify-content-end bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">With space between the lines</p>

												<div class="d-flex justify-content-between bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">With space before, between, and after the lines</p>

												<div class="d-flex justify-content-around bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Justify content classes</span></td>
											</tr>
											<tr>
												<td><code>.justify-content-[value]</code></td>
												<td>Aligns the flex container's items when the items don't use all available space on the main-axis (horizontally). Available options for <strong>[value]</strong>: <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, or <code>around</code>.</td>
											</tr>
											<tr>
												<td><code>.justify-content-[breakpoint]-[value]</code></td>
												<td>Responsive variations of <code>.justify-content-[value]</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /justify content -->


				            <!-- Align items -->
							<div class="card" id="helpers_flex_align_items">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Align items</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Use <code>align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>). Choose from <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default). Basically it works like <code>justify-content</code>, but in the perpendicular direction. <strong>Tip:</strong> use the <code>align-self</code> property of each item to override the <code>align-items</code> property.

									<div class="row">
										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Beginning (start) of the container</p>

												<div class="d-flex align-items-start justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Center of the container</p>

												<div class="d-flex align-items-center justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">End of the container</p>

												<div class="d-flex align-items-end justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">WBaseline of the container</p>

												<div class="d-flex align-items-baseline justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Fit the container</p>

												<div class="d-flex align-items-stretch justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3">
														Flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Align items classes</span></td>
											</tr>
											<tr>
												<td><code>.align-items-[value]</code></td>
												<td>Alignment of items inside flex container. Options for <strong>[value]</strong>: <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default).</td>
											</tr>
											<tr>
												<td><code>.align-items-[breakpoint]-[value]</code></td>
												<td>Responsive variations of <code>.align-items-[value]</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /align items -->


				            <!-- Align self -->
							<div class="card" id="helpers_flex_align_self">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Align self</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Use <code>align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>). Choose from the same options as align-items: <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default). The property doesn't apply to block-level boxes, or to table cells.

									<div class="row">
										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Beginning (start) of the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate align-self-start border-left-1 border-white py-2 px-3">
														Aligned flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">Center of the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate align-self-center border-left-1 border-white py-2 px-3">
														Aligned flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-4">
											<div class="mt-3">
												<p class="font-weight-semibold">End of the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate align-self-end border-left-1 border-white py-2 px-3">
														Aligned flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Baseline of the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate align-self-baseline border-left-1 border-white py-2 px-3">
														Aligned flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Fit the container</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2" style="height: 120px;">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item
													</div>
													<div class="bg-slate align-self-stretch border-left-1 border-white py-2 px-3">
														Aligned flex item
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Align self classes</span></td>
											</tr>
											<tr>
												<td><code>.align-self-[value]</code></td>
												<td>Alignment of the selected item inside flex container. Options for <strong>[value]</strong>: <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default).</td>
											</tr>
											<tr>
												<td><code>.align-self-[breakpoint]-[value]</code></td>
												<td>Responsive variations of <code>.align-self-[value]</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes.</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /align self -->


				            <!-- Auto margins -->
							<div class="card" id="helpers_flex_margins">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Auto margins</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code>.mr-auto</code>), and pushing two items to the left (<code>.ml-auto</code>). Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code>justify-content</code> value.

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Right auto margin</p>

												<div class="d-flex bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded mr-auto">
														Flex item 1
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-left">
														Flex item 2
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item 3
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Left auto margin</p>

												<div class="d-flex bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded-left">
														Flex item 1
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 rounded-right">
														Flex item 2
													</div>
													<div class="bg-slate border-left-1 border-white py-2 px-3 ml-auto rounded">
														Flex item 3
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Bottom auto margin</p>

												<div class="d-flex flex-column bg-light border rounded p-2" style="height: 180px;">
													<div class="bg-slate py-2 px-3 rounded mb-auto">
														Flex item 1
													</div>
													<div class="bg-slate py-2 px-3 rounded-top">
														Flex item 2
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3 rounded-bottom">
														Flex item 3
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Top auto margin</p>

												<div class="d-flex flex-column bg-light border rounded p-2" style="height: 180px;">
													<div class="bg-slate py-2 px-3 rounded-top">
														Flex item 1
													</div>
													<div class="bg-slate border-top-1 border-white py-2 px-3 rounded-bottom">
														Flex item 2
													</div>
													<div class="bg-slate py-2 px-3 rounded mt-auto">
														Flex item 3
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Auto margin classes</span></td>
											</tr>
											<tr>
												<td><code>.m[t,b,l,r]-auto</code></td>
												<td>Pushes flex items to specified side, where "l" is left, "r" is right, "t" is top and "b" is bottom.</td>
											</tr>
											<tr>
												<td><code>.m[t,b,l,r]-[breakpoint]-auto</code></td>
												<td>Responsive variations of <code>.m[t,b,l,r]-auto</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /auto margins -->


				            <!-- Flex wrap -->
							<div class="card" id="helpers_flex_wrap">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Flex wrap</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									The <code>flex-wrap</code> classes specify whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. <strong>Note:</strong> if the elements are not flexible items, the <code>flex-wrap</code> property has no effect. Supports 2 directions: default and reversed.

									<div class="mt-3">
										<p class="font-weight-semibold">No wrap</p>

										<div class="d-flex justify-content-center flex-nowrap bg-light border rounded p-2">
											<div class="bg-slate py-2 px-3 d-flex rounded-left" style="flex-grow: 1;">
												Flex item
											</div>
											<div class="bg-slate py-2 px-3 d-flex border-left-1 border-white" style="flex-grow: 1;">
												Flex item
											</div>
											<div class="bg-slate py-2 px-3 d-flex border-left-1 border-white" style="flex-grow: 1;">
												Flex item
											</div>
											<div class="bg-slate py-2 px-3 d-flex border-left-1 border-white rounded-right" style="flex-grow: 1;">
												Flex item
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Wrap - default direction</p>

												<div class="d-flex flex-wrap bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Wrap - reversed direction</p>

												<div class="d-flex flex-wrap-reverse bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Flex wrap classes</span></td>
											</tr>
											<tr>
												<td><code>.flex-nowrap</code></td>
												<td>The flex items are laid out in a single line - may cause the flex container to overflow</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-nowrap</code></td>
												<td>Responsive variations of <code>.flex-nowrap</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.flex-wrap</code></td>
												<td>The flex items break into multiple lines</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-wrap</code></td>
												<td>Responsive variations of <code>.flex-wrap</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
											<tr>
												<td><code>.flex-wrap-reverse</code></td>
												<td>Behaves the same as <code>.flex-wrap</code>, but in reverse order</td>
											</tr>
											<tr>
												<td><code>.flex-[breakpoint]-wrap-reverse</code></td>
												<td>Responsive variations of <code>.flex-wrap-reverse</code> class. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /flex wrap -->


				            <!-- Flex order -->
							<div class="card" id="helpers_flex_order">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Flex order</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Change the <span class="font-italic">visual</span> order of specific flex items with a handful of <code>order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. Elements with the same order value are laid out in the order in which they appear in the source code. <strong>Note:</strong> If the element is not a flexible item, the order property has no effect.

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Default order</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded">
														Flex item 1
													</div>
													<div class="bg-slate py-2 px-3 mx-2 rounded">
														Flex item 2
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item 3
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Custom order</p>

												<div class="d-flex justify-content-center bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 mx-2 rounded order-2">
														Flex item 1
													</div>
													<div class="bg-slate py-2 px-3 rounded order-3">
														Flex item 2
													</div>
													<div class="bg-slate py-2 px-3 rounded order-1">
														Flex item 3
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Default order</p>

												<div class="d-flex justify-content-center flex-column bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 rounded">
														Flex item 1
													</div>
													<div class="bg-slate py-2 px-3 my-2 rounded">
														Flex item 2
													</div>
													<div class="bg-slate py-2 px-3 rounded">
														Flex item 3
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Custom order</p>

												<div class="d-flex justify-content-center flex-column bg-light border rounded p-2">
													<div class="bg-slate py-2 px-3 my-2 rounded order-2">
														Flex item 1
													</div>
													<div class="bg-slate py-2 px-3 rounded order-3">
														Flex item 2
													</div>
													<div class="bg-slate py-2 px-3 rounded order-1">
														Flex item 3
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Flex order classes</span></td>
											</tr>
											<tr>
												<td><code>.order-[value]</code></td>
												<td>Specify the order used to lay out flex items in their flex container. Values for <strong>[value]</strong>: <code>1</code>, <code>2</code>, ... <code>12</code>.</td>
											</tr>
											<tr>
												<td><code>.order-[breakpoint]-[value]</code></td>
												<td>Responsive variations of <code>.order-[value]</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /flex order -->


				            <!-- Align content -->
							<div class="card" id="helpers_flex_align_content">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Align content</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Use <code>align-content</code> utilities on flexbox containers to align flex items together on the cross axis. Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, <code>around</code>, or <code>stretch</code>. To demonstrate these utilities, we’ve enforced <code>flex-wrap: wrap</code> and increased the number of flex items. <strong>Note:</strong> this property has no effect on single rows of flex items.

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Start of the flex container</p>

												<div class="d-flex flex-wrap align-content-start bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">End of the flex container</p>

												<div class="d-flex flex-wrap align-content-end bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Center of the flex container</p>

												<div class="d-flex flex-wrap align-content-center bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Evenly in the flex container</p>

												<div class="d-flex flex-wrap align-content-between bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Evenly with half-size spaces on either end</p>

												<div class="d-flex flex-wrap align-content-around bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>

										<div class="col-xl-6">
											<div class="mt-3">
												<p class="font-weight-semibold">Stretch to take up the remaining space</p>

												<div class="d-flex flex-wrap align-content-stretch bg-light border rounded p-2" style="min-height: 160px;">
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-left">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0">
														Flex item
													</div>
													<div class="bg-slate py-2 px-3 border-1 border-white border-right-0 border-top-0 rounded-right">
														Flex item
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table">
										<tbody>
											<tr class="table-border-double table-active">
												<td colspan="2"><span class="font-weight-semibold">Align content classes</span></td>
											</tr>
											<tr>
												<td><code>.align-content-[value]</code></td>
												<td>Similar to align-items, but instead of aligning flex items, it aligns flex lines. Options for <strong>[value]</strong> are similar to <code>.justify-content-[value]</code> classes</td>
											</tr>
											<tr>
												<td><code>.align-content-[breakpoint]-[value]</code></td>
												<td>Responsive variations of <code>.align-content-[value]</code> classes. Options for <strong>[breakpoint]</strong>: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> screen sizes</td>
											</tr>
										</tbody>
									</table>
								</div>
				            </div>
				            <!-- /align content -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#helpers_content" class="nav-link">Content helpers</a></li>
										<li class="nav-item nav-item-submenu">
											<a href="#helpers_flex_enable" class="nav-link">Flex utilities</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#helpers_flex_enable" class="nav-link">Basic</a></li>
												<li class="nav-item"><a href="#helpers_flex_direction" class="nav-link">Direction</a></li>
												<li class="nav-item"><a href="#helpers_flex_justify" class="nav-link">Justify content</a></li>
												<li class="nav-item"><a href="#helpers_flex_align_items" class="nav-link">Align items</a></li>
												<li class="nav-item"><a href="#helpers_flex_align_self" class="nav-link">Align self</a></li>
												<li class="nav-item"><a href="#helpers_flex_margins" class="nav-link">Auto margins</a></li>
												<li class="nav-item"><a href="#helpers_flex_wrap" class="nav-link">Wrap</a></li>
												<li class="nav-item"><a href="#helpers_flex_order" class="nav-link">Order</a></li>
												<li class="nav-item"><a href="#helpers_flex_align_content" class="nav-link">Align content</a></li>
											</ul>
										</li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
